<template>
  <div>
   <header-component :title="header"></header-component>
    <art-swiper></art-swiper>
      <ul class="art-list" v-for="item of ulList" :key="item.id" @click="skip(item)">
        <li class="border-bottom">
        <div class="list-img"><img :src='item.url'></div>
          <div class="list-detail">
            <p class="detail-title">{{item.title}}</p>
            <p class="detail-author">{{item.author}}</p>
            <p class="detail-main">{{item.article}}</p>
            <div class="list-praise">
              <div><span class="iconfont">&#xe618;</span>25</div>
              <div class="dianzan"> <span class="iconfont">&#xe618;</span>15</div>
             <div>{{item.time}}<span class="iconfont">&#xe603;</span></div>
            </div>
          </div>
      </li>
      </ul>
   
  </div>
</template>

<script>
  import HeaderComponent from '../../commom/HeaderComponent'
  import ArtSwiper from './components/ArtSwiper'

  export default {
    name: "Literature",
    components: {
      HeaderComponent,
      ArtSwiper},
    data(){
      return{
        header:"阅览室",
        ulList:[
          {
            id:'001',
            url:"http://img1.qunarzz.com/sight/p0/1602/de/de8400021b664c5390.img.jpg_250x250_765bcddd.jpg",
            title:'前世情人的今世窘境前世情人的今世窘境前世情人的今世窘境',
            author:'朱自清',
            article:'正文部分此处显示文章的前30多个字，达到两行即可，后面省略正文部分此处显示文章的前30多个字，达到两行即可',
            time:'2017-3-15'
          },
          {
            id:'002',
            url:"http://img1.qunarzz.com/sight/p0/1411/b8/f5fd5955bdecc923ce6d40ce453160eb.water.jpg_250x250_de106da6.jpg",
            title:'前世情人的今世窘境',
            author:'朱自清',
            article:'正文部分此处显示文章的前30多个字，达到两行即可，后面省略正文部分此处显示文章的前30多个字，达到两行即可，后面省略',
            time:'2018-3-15'
          },
          {
            id:'003',
            url:"http://img1.qunarzz.com/sight/p0/1412/84/f696c67a8052bb60e6fc51b0f9ba7388.water.jpg_250x250_98036577.jpg",
            title:'前世情人的今世窘境',
            author:'朱自清',
            article:'正文部分此处显示文章的前30多个字，达到两行即可，后面省略正文部分此处显示文章的前30多个字，达到两行即可，后面省略',
            time:'2019-3-15'
          }
        ]
      }
    },
    methods: {
      skip: function (item) {
        this.$router.push({path:'Literaturedetail',query:{userId: JSON.stringify(item)}})
      }
    }
  }
</script>

<style scoped>
  /*.art-header {*/
    /*position: fixed;*/
    /*top: 0;*/
    /*width: 100%;*/
    /*display: flex;*/
    /*justify-content: space-between;*/
    /*align-items: center;*/
    /*height: 1rem;*/
    /*font-size: 18px;*/
    /*color: #ffffff;*/
    /*background: #1b1a1f;*/
    /*z-index: 2;*/
  /*}*/

  /*.header-left {*/
    /*margin-left: .2rem;*/
  /*}*/

  /*.header-right {*/
    /*margin-right: .2rem;*/
  /*}*/

  /*.iconfont {*/
    /*font-size: 20px;*/
    /*font-weight: bold;*/
  /*}*/
  .art-list li{
    display: flex;
    /*width: 100%;*/
    padding: .4rem .2rem .1rem .2rem;
    margin: 0 .2rem;
  }
  .list-img{
    width: 2rem;
    height:2rem;
  }
  .list-img img{
    width: 100%;
  }
  .list-detail{
    flex: 1;
    margin-left: .4rem;
  }
  .list-praise{
    display: flex;
    justify-content: space-between;
    margin-top: .26rem;
    color: #bababa;
  }
  .detail-title{
    font-size: 16px;
    font-weight: bold;
  }
  .detail-author{
    line-height: .5rem;
    font-size: 14px;
  }
  .detail-main{
    overflow: hidden;
    color: #bababa;
  }
  .iconfont{
    margin-right: .2rem;
  }
  .dianzan{
    margin-left: -4rem;
  }
</style>
